<template>
  <BasicDrawer v-bind="$attrs" @register="registerDrawer" title="订单详情" width="750px">
    <Description class="pay-desc" @register="registerDescription" v-if="detailData" :data="detailData" />
    <Empty v-else />
  </BasicDrawer>
</template>
<script lang="ts" setup>
  import { ref, useAttrs } from "vue"
  import { BasicDrawer, useDrawerInner } from "/@/components/Drawer"
  import { Description, useDescription } from "/@/components/Description/index"
  import { formDetailSchema } from "./order.data"
  import { getTradeData, getPayOrder } from "/@/api/pay"
  import { Empty } from "ant-design-vue"
  const emit = defineEmits(["register"])
  const attrs = useAttrs()
  const detailData = ref()
  const [registerDescription] = useDescription({
    column: 4,
    bordered: false,
    schema: formDetailSchema,
    labelStyle: {
      marginLeft: "10px",
    },
  })

  const [registerDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner(async (data) => {
    detailData.value = null
    setDrawerProps({ confirmLoading: false, loading: true })
    try {
      const record = (await getPayOrder({ payOrderNo: data.record.payOrderNo })) || {}
      if (!record) {
        return
      }
      const tradeData = await getTradeData({
        orderNo: record.payOrderNo,
        mchNo: record.mchNo,
        appId: record.appId,
      })
      record.tradeContent = tradeData?.tradeContent
      record.tradeType = tradeData?.tradeType
      detailData.value = record
    } finally {
      setDrawerProps({ loading: false })
    }
  })
</script>

<style lang="less">
  .pay-desc {
    margin-right: 10px;
  }
</style>
